<template>
  <demo-content :title="title">
    <div>
      <table>
        <caption>
          CanvasRenderingContext2D 对象中用于平移、旋转、平移坐标系的方法
        </caption>
        <thead>
          <tr>
            <th>方法</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>rotate(double angleInRadians)</code></td>
            <td>按照给定的角度来旋转坐标系。(注意: π 弧度等于180 角度)</td>
          </tr>
          <tr>
            <td><code>scale(double x, double y)</code></td>
            <td>在X与Y方向上分别按照给定的数值来缩放坐标系</td>
          </tr>
          <tr>
            <td><code>translate(double x, double y)</code></td>
            <td>将坐标系 平移到给定的 X、Y 坐标处</td>
          </tr>
        </tbody>
      </table>
    </div>
    <canvas ref="canvasRef" width="600" height="400"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "坐标系平移/缩放/旋转";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  // ctx.font = "38pt Arial";
  // ctx.fillText("hello", 30, 30);
  ctx.save();
  // ctx.translate(50, 50);
  ctx.transform(1, 0, 0, 1, 50, 50);
  ctx.fillStyle = "orange";
  ctx.fillRect(50, 50, 100, 100);
  ctx.save();
  // ctx.translate(100, 100);
  ctx.transform(1, 0, 0, 1, 100, 100);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.rotate(-Math.PI / 4);
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 0);
  ctx.stroke();

  ctx.restore();
  ctx.restore();
  ctx.fillRect(50, 50, 100, 100);
});
</script>

<style src="./default.css" scoped></style>
